<template>
  <el-menu
    default-active="1"
    active-text-color="#f40"
    class="header"
    mode="horizontal"
    menu-trigger="hover"
  >
    <div class="header-box">
      <div class="left" ref="left">
        <el-menu-item index="1" class="special" @click="clickIf ? toLogin() : toHome()">{{current[0]}}</el-menu-item>
        <el-menu-item index="2" @click="clickIf ? toRegister() : logOff()">{{current[1]}}</el-menu-item>
      </div>
      <div class="right" ref="right">
        <el-menu-item index="3" @click="toIndex()">淘宝首页</el-menu-item>
        <el-submenu index="4">
          <template slot="title"><span>我的淘宝</span></template>
          <el-menu-item v-if="!clickIf" @click="toOrder()"><span>已买到的宝贝</span></el-menu-item>
          <el-menu-item v-if="!clickIf" @click="toHistory()"><span>我的足迹</span></el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title"
            ><div @click="clickIf ? toLogin() : toCart()">
              <i class="iconfont icon-cart_fill_light"></i><span>购物车</span
              ><i class="iconfont icon-unfold"></i>
            </div>
          </template>
          <div v-if="!clickIf">
            <el-menu-item index="5-1" v-for="(item, index) in list" :key="index">
              <div class="cart-item">
                <img :src="`http://localhost:8080/api/v1/images/${item.item.imageDir}/thumbnail.jpg`" alt="">
                <span>{{item.item.name}}</span>
                <span style="padding-left:20px;color:#f40;flex:1">￥{{item.item.price}}</span>
              </div>
            </el-menu-item>
            <el-menu-item class="space">...</el-menu-item>
          </div>
        </el-submenu>
        <el-menu-item @click="clickIf ? toLogin() : toFavorite()"><i class="iconfont icon-favor_fill_light"></i><span>收藏夹</span></el-menu-item>
        <el-menu-item index="7"
          ><i class="iconfont icon-message_fill_light"></i
          ><span>联系客服</span></el-menu-item
        >
      </div>
    </div>
  </el-menu>
</template>

<script>
export default {
  data () {
    return {
      screenWidth: 1920,
      clickIf: true,
      current: ['请登录', '免费注册'],
      list: []
    }
  },
  methods: {
    toIndex () {
      this.$router.push('/')
    },
    toLogin () {
      this.$router.push('/Login')
    },
    toRegister () {
      this.$router.push('/Register')
    },
    toHome () {
      this.$router.push('/Home')
    },
    toOrder () {
      this.$router.push('/Order')
    },
    toHistory () {
      this.$router.push('/History')
    },
    toCart () {
      this.$router.push('/Cart')
    },
    toFavorite () {
      this.$router.push('/Favorite')
    },
    logOff () {
      this.clickIf = true
      this.$set(this.current, 0, '请登录')
      this.$set(this.current, 1, '免费注册')
      this.$http.post('users/loginOut').then((res) => {
        console.log(res)
        this.$cookie.remove('userInfo')
        this.$cookie.remove('satoken')
        this.$router.push('/')
        this.$router.go(0)
      }).catch((err) => {
        console.log(err.response)
      })
    }
  },
  mounted () {
    this.screenWidth = document.body.clientWidth
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth
        if (this.screenWidth < 1200) {
          this.$refs.left.style.marginLeft = 0
          this.$refs.right.style.marginRight = 0
        } else {
          this.$refs.left.style.marginLeft = 200 + 'px'
          this.$refs.right.style.marginRight = 100 + 'px'
        }
      })()
    }
    const userInfo = JSON.parse(this.$cookie.get('userInfo'))
    if (userInfo) {
      this.$set(this.current, 0, userInfo.name)
      this.$set(this.current, 1, '退出')
      this.clickIf = false
      this.$http.get('cart', {
        params: {
          userId: userInfo.userId
        }
      }).then((res) => {
        if (res.status === 200) {
          if (res.data.length >= 2) {
            this.list.push(res.data[0], res.data[1])
          } else if (res.data.length === 1) {
            this.list.push(res.data[0])
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.iconfont {
  padding: 5px;
}
.el-menu {
  width: 100%;
  font-size: 16px;
  border: none;
  .header-box {
    display: flex;
    justify-content: space-between;
    background-color: #f5f5f5;
    .left {
      margin-left: 200px;
      display: flex;
      height: 100%;
      line-height: 30px;
      padding: 0 10px;
      .el-menu-item:hover {
        background-color: white;
        color: #f40;
      }
      .special {
        color: #f40;
      }
    }
    .right {
      margin-right: 100px;
      display: flex;
      /deep/ .el-submenu__icon-arrow {
        display: none;
      }
      /deep/ .el-submenu__title:hover {
        background-color: white;
        color: #f40;
        :first-child {
          color: #f40;
        }
      }
      .el-menu-item:hover {
        background-color: white;
        color: #f40;
        i {
          color: #f40;
        }
      }

    }
  }
}
.cart-item {
  width: 200px;
  height: 50px;
  margin: 10px 0;
  display: flex;
  img {
    width: 40px;
    height: 40px;
  }
  span {
    width: 100px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
  }
}
.space {
  text-align: center;
}
</style>
